<%--
  Created by LeeDvan.
  User: dl
  Date: 2021/5/8
  Time: 16:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/public/header/permissionCommon.jspf" %>

<html>
<head>
    <title>个人中心</title>
    <%--<link rel="stylesheet" type="text/css" href="${webPath}/css/pages/SysMonitor/template.css"/>--%>
    <style>
        .layui-nav-img {
            margin-right: auto;
        }
        .site-center{
            text-align: center;
        }
    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <!-- 头部和左侧导航-->
    <div id="header"></div>

    <!--右侧主体区域-->
    <div class="layui-body" >
        <div style="margin-top:24px; ">
            <div class="layui-row site-center">
                <a id="info-headImg" disabled>
                    <img src="" class="layui-nav-img headImg" style="width: 64px;height: 64px;"/>
                </a>
            </div>
            <div class="layui-row site-center">
                <span class="layui-badge layui-bg-orange layui-circle" style="margin: 8px auto;">${user.user_role}</span>
            </div>
            <form id="user-info-form" class="layui-form"  style="margin-top: 12px;width: 80%;">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <!--性别-->
                        <label class="layui-form-label">姓名</label>
                        <div class="layui-input-inline">
                            <input type="text" name="name"  placeholder="姓名" autocomplete="off"  class="layui-input"
                                   value="${user.user_name}">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">工号</label>
                        <div class="layui-input-inline">
                            <input type="text" name="user_number" autocomplete="off"  class="layui-input" readonly value="${user.user_number}">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">性别${user.user_sex}</label>
                        <div class="layui-input-inline">
                            <input type="radio" name="user_sex" value="男" title="男" readonly
                            ${user.user_sex.equals("男")?"checked":""} />
                            <input type="radio" name="user_sex" value="女" title="女" readonly
                            ${user.user_sex.equals("女")?"checked":""} />
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <!--性别-->
                        <label class="layui-form-label">身份证号码</label>
                        <div class="layui-input-inline">
                            <input type="text" name="identity"  lay-verify="required|identity" autocomplete="off"  class="layui-input"
                                   value="${user.identity}" readonly>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">电话</label>
                        <div class="layui-input-inline">
                            <input type="tel" name="user_mobile" lay-verify="required|phone"  autocomplete="off" class="layui-input"
                                   value = "${user.user_mobile}"
                            >
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">邮箱</label>
                        <div class="layui-input-inline">
                            <input type="email" name="user_email" lay-verify="email"  autocomplete="off" class="layui-input"
                                   value="${user.user_email}"
                            >
                        </div>
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">家庭住址</label>
                    <div class="layui-input-block">
                        <input type="text" name="family" lay-verify="required"  placeholder="请输入" autocomplete="off" class="layui-input"
                               value="${user.family}"/>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">机构代码</label>
                        <div class="layui-input-inline">
                            <input type="text"  autocomplete="off" class="layui-input"  placeholder="${user.department_settlement_code}" readonly>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">机构所在地</label>
                        <div class="layui-input-block">
                            <input  type="text"  autocomplete="off" class="layui-input"  placeholder="${user.jigou}" readonly>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button id="info-submit" class="layui-btn layui-btn-normal layui-hide" lay-submit>提交</button>
                        <button type="button" id="info-edit" class="layui-btn layui-btn-primary" lay-filter="form-edit" >修改</button>
                    </div>
                </div>
            </form>
        </div>
    </div>


    <!--底部-->
    <div id="footer"></div>
    <script>
        $("#header").load("${webPath}/publicPages/permission/fragments/header.jsp");
    </script>

</div>
</body>

<script>
    //初始禁用输入框修改
    $("#user-info-form input[name]").addClass('layui-disabled');

    $(function(){
        layui.use(['jquery', 'form', 'layer'], function(){
            let form = layui.form, layer = layui.layer, $ = layui.jquery;


            //编辑按钮点击
            $("#info-edit").click(function () {
                console.log("点击");
                //去除限制编辑属性
                $("#user-info-form input[name]").removeClass('layui-disabled');
                $(".info-headImg").removeClass('layui-disabled');

                //隐藏修改按钮
                $("#info-edit").addClass("layui-hide");
                setTimeout(function () {
                    //显示保存按钮
                    $("#info-submit").removeClass("layui-hide");
                }, 200)

            });

            //表单提交
            form.on('submit(form-edit)', function(data){
                let field = data.field;
                // console.log('field', field);
                console.log("提交");
                let loadingIndex = layer.load(2);
                $.ajax({
                    type: "POST",
                    url: "/user/update",
                    data: field,
                    success: function (res) {
                        if (res.code == 0) {
                            layer.msg("修改成功");
                        }
                        else {
                            layer.msg(res.msg || "修改失败");
                        }
                    },
                    error : function() {
                        layer.msg("请求失败");
                    },
                    complete:function () {
                        //隐藏修改按钮
                        $("#info-edit").addClass("layui-hide");
                        //显示保存按钮
                        $("#info-submit").removeClass("layui-hide");

                        layer.close(loadingIndex);
                    }
                });

                return false;
            });
        });
    })
</script>

</html>